<template>
    <el-table ref="table" :data="tableData" tooltip-effect="dark" @select="handleSelectionChange" @select-all="handleSelectionChange">>
        <el-table-column :selectable="checkSelectable" type="selection" width="60px"></el-table-column>
        <el-table-column prop="featureName" label="字段名" show-overflow-tooltip></el-table-column>
    </el-table>
</template>
<script>
import {
    mapGetters, mapMutations
} from 'vuex'
export default {
    name: 'Field',
    data () {
        return {
            tableData: [],
            dataList: []
        }
    },
    computed: {
        ...mapGetters({
            analysisReportData: 'common/getAnalysisReportData'
        })
    },
    mounted () {
        this.tableData = this.analysisReportData.content['散点图'].filter(v => v.featureType !== 'label')
        if (this.tableData.length <= 6) {
            this.$refs.table.toggleAllSelection()
        } else {
            this.$nextTick(() => {
                for (let i = 0; i < 6; i++) {
                    this.$refs.table.toggleRowSelection(this.tableData[i], true)
                }
            })
            this.handleSelectionChange(this.tableData.slice(0, 6))
        }
    },
    methods: {
        ...mapMutations({
            setSelectedField: 'common/setSelectedField'
        }),
        checkSelectable (row) {
            return this.dataList.includes(row.featureName) ? true : this.dataList.length < 10
        },
        handleSelectionChange (val) {
            let data = []
            for (let i = 0; i < val.length; i++) {
                for (let j = 0; j < this.tableData.length; j++) {
                    if (val[i].featureName === this.tableData[j].featureName) {
                        data[j] = this.tableData[j].featureName
                    }
                }
            }
            this.dataList = data.filter(v => v)
            this.setSelectedField(this.dataList)
        }
    }
}
</script>

<style lang="less">
    .bivariate-analysis {
        .el-table th{
            .el-checkbox__inner {
                display: none;
            }
        }
    }
</style>
